<template>
		<view :class="['content content-' + message.flow]"  @click.stop>
			<view v-if="JSON.stringify(originMessage) !== '{}'" style="min-width:450rpx;">
				<view class="origin-box">
					<view style="color:#7f7f7f">{{originMessage.messageSender}}:</view>
					<span style="color:#7f7f7f" v-html="originMessage.messageAbstract"></span>
				</view>	
				<view class="divider"></view>
			</view>
			<view v-for="(item, index) in data.text" :key="index">
			   <span v-if="item.name === 'text'" style="white-space: pre-wrap;" v-html="item.text"></span>
			   <img class="text-img" v-else-if="item.name === 'img'" :src="item.src"/>
			   <view v-if="dicttext!=''&& message.ID===msgid">
				   <view>{{dicttext}}</view>
			   </view>
			</view>
		</view>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
const MessageText =  defineComponent({
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
	messageData: {
	  type: Object,
	  default: () => {
		  return {};
		}
	},
	translate: {
		type: Object,
		default: () => {
			return {};
		}
	},
	msgid: {
		type: Number,
		default: () => {
			return 0;
		}
	},
  },
  setup(props:any, ctx:any) {
    const data = reactive({
      data: {},
			dicttext:[],
			message: {},
			msgid:0,
			originMessage:{}
    });
    watchEffect(()=>{
	  data.data = props.data;
	  data.message = props.messageData;
	  if(props.messageData.cloudCustomData != ''){
		  	data.originMessage = JSON.parse(props.messageData.cloudCustomData)
	  }
	  data.dicttext = props.translate;
	  data.msgid = props.msgid;
    });
    return {
      ...toRefs(data),
    };
  }
});
export default MessageText
</script>
<style lang="scss" scoped>
.text-img {
  width: 20px;
  height: 20px;
	display:inline-block;
}
.content {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		.origin-box {
			border:2px solid transparent;
			border-left-color: #f1f1f1;
			padding-left:20rpx;
		}
		.divider {
			width:90%;
			height:1px;
			background-color: #f1f1f1;
			margin:20rpx 0;
		}
    &-in {
      background: #fff;
      border-radius: 0px 10px 10px 10px;
			.origin-box {
				border:2px solid transparent;
				border-left-color: #f1f1f1;
				padding-left:20rpx;
			}
			.divider {
				width:90%;
				height:1px;
				background-color: #f1f1f1;
				margin:20rpx 0;
			}
			
    }
    &-out {
      background: #DCEAFD;
      border-radius: 10px 0px 10px 10px;
		  .origin-box {
		  	border:2px solid transparent;
		  	border-left-color: #d0dff1;
		  	padding-left:20rpx;
		  }
			.divider {
				width:90%;
				height:3rpx;
				background-color: #d0dff1;
				margin:20rpx 0;
			}
    }
		
  }
</style>
